<template>
  <!-- 首页 -->
  <div>
    <!-- 页面头部 -->
    <van-sticky>
      <head-nev msg="黑马优购" :backState="false"></head-nev>
    </van-sticky>
    
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.image_src" class="Img" @click="viewpager(image.goods_id)" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品模块区 -->
    <van-row type="flex" justify="space-around" class="module">
      <van-col span="4" v-for="(module, index) in modules" :key="index">
        <img v-lazy="module.image_src" class="moduleImg" @click="jumpCateList(index)" />
      </van-col>
    </van-row>
    <!-- 商品展示区 -->
    <div :key="index" v-for="(item,index) in floorist">
      <!-- 楼层标题 -->
      <van-row>
        <van-col>
          <img :src="item.floor_title.image_src" />
        </van-col>
      </van-row>
      <!-- 楼层内容列表 -->

      <van-row>
        <van-col span="8" class="spacing">
          <img :src="item.product_list[0].image_src" @click="floor(item.product_list[0].name)" />
        </van-col>
        <van-col span="8">
          <!--  -->
          <van-row gutter="20">
            <van-col span="23">
              <img :src="item.product_list[1].image_src" @click="floor(item.product_list[1].name)" />
            </van-col>
            <van-col span="23">
              <img :src="item.product_list[2].image_src" @click="floor(item.product_list[2].name)" />
            </van-col>
          </van-row>
        </van-col>
        <!--  -->
        <van-col span="8" gutter="20">
          <van-row>
            <van-col span="23">
              <img :src="item.product_list[3].image_src" @click="floor(item.product_list[3].name)" />
            </van-col>
            <van-col span="23">
              <img :src="item.product_list[4].image_src" @click="floor(item.product_list[4].name)" />
            </van-col>
          </van-row>
        </van-col>
      </van-row>
    </div>
    <!-- 底部 -->
    <foot-nav></foot-nav>
  </div>
</template>


<script>
export default {
  data() {
    return {
      images: [],
      modules: [],
      floorist: []
    }
  },
  created() {
    this.getSwiperData()
    this.getModuleData()
    this.getShowData()
  },
  methods: {
    //获取轮播图数据
    async getSwiperData() {
      const data = await this.$http.get('/home/swiperdata')
      // debugger
      // if (data.meta.status !== 200) {
      //   this.$toast.fail('数据请求失败')
      // }
      this.images = data.data.message
      // debugger
      // console.log(this.images)
    },
    viewpager(goods_id) {
      this.$router.push({
        path: 'details',
        name: 'details',
        params: { id: goods_id }
      })
    },
    //获取模块数据
    async getModuleData() {
      const data = await this.$http.get('/home/catitems')
      // if (data.meta.status !== 200) {
      //   this.$toast.fail('数据请求失败')
      // }
      this.modules = data.data.message
    },
    //获取商品展示数据
    async getShowData() {
      const data = await this.$http.get('/home/floordata')
      // console.log(data)
      this.floorist = data.data.message
    },
    floor(name) {
      this.$router.push({
        path: 'goodsList',
        name: 'goodsList',
        params: { cateName: name }
      })
    },

    // 跳转分类页面
    jumpCateList(i) {
      if (i !== 0) return
      this.$router.push('/categories')
    }
  }
}
</script>

<style lang="less" scoped>
.Img {
  width: 100%;
  height: 200px;
}
.moduleImg {
  width: 100%;
}
.module {
  margin: 0.3rem;
}

img {
  width: 100%;
}

.spacing {
  padding-right: 6px;
}
</style>
